<template>
  <div id="HelloWorld">
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" >
        <el-form-item label="新密码" prop="newPassword"  :label-width="formLabelWidth">
          <el-col :span="12">
            <el-input type="password" v-model="form.newPassword" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword"  :label-width="formLabelWidth">
          <el-col :span="12">
            <el-input type="password" v-model="form.confirmPassword" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
    <el-container class="bigBox">
      <el-header>
        <img src="../../static/img/right-logo.png" alt="">
        <span class="logo-title">和佳工作管理平台</span>
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ message }} <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">修改密码</el-dropdown-item>
            <el-dropdown-item command="b">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-select class="groupSelect" clearable @change="getDataList"  v-model="valueGroup" placeholder="请先选择项目组">
          <el-option
            v-for="item in optionsGroup"
            :key="item.valueGroup"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
              <el-menu
                default-active="1-1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <template v-for="(item,index) in routerGroup">                  
                    <el-submenu :key="index" :index="index+''" >
                      <template slot="title">
                        <i :class="item.className"></i>
                        <span slot="title">{{item.name}}</span>
                      </template>
                      <el-menu-item v-for="secondItem in item.childrenPermissions" :key="secondItem.index" :index="secondItem.index">
                        <router-link tag="li" :to="{ path: '/'+secondItem.url }">{{secondItem.name}}</router-link>                        
                      </el-menu-item>                         
                    </el-submenu>                  
                </template>
              </el-menu>
          </el-row>
        </el-aside>
        <el-container>
          <el-main>
            <router-view ref="child"></router-view>
          </el-main>
          <el-footer>2018 © Octopus by hokai.</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          newPassword:''
        },
        routerGroup:[],
        message:'',
        userId:'',
        rules: {
          newPassword: [
            { required: true, message: '请填写新密码', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, message: '请确认密码', trigger: 'blur' }
          ]
        },
        dialogFormVisible:false,
        formLabelWidth:'320px',
        optionsGroup: [],
        valueGroup: ''
      };
    },
    name: 'HelloWorld',
    components: {},
    created() {
      //调用查询用户名方法
      this.setName();
      this.setNav();
      this.getGroupList();
    },
    beforeDestroy() {},
    computed: {},
    mounted() {},
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleCommand(command) {
        //this.$message('click on item ' + command);
        if(command == 'a'){
          var self = this;
          self.dialogFormVisible = true;
        }else if(command == 'b'){
          //退出登录
          var self = this;
          self.
            postRequest("/logout", {
              
            }).then(
              res => {      
                console.log(res)
                if(res.data.result == 1){
                  this.$message(res.data.message);
                  self.$router.push("/");
                }else {
                  this.$message('退出时发生错误,联系管理员');
                }
                
                
              }
            );

          
        }
      },
      setName() {
        var self = this;
        self.
          postRequest("/currUser", {
            
          }).then(
            res => {      

              self.message = res.data.name;  
              self.userId = res.data.id;
              //console.log(self.userId)
              
            }
          );
      },
      setNav() {
        var self = this;
        self.
          postRequest("/currPermissions", {
            
          }).then(
            res => {      
              console.log(res.data)
              self.routerGroup = res.data.menus;  
              
            }
          );
      },
      getGroupList() {
        var self = this;
        //console.log(self.currentPage)
        self.getRequest("/base/common/queryProjectNameByUserIdAndDataPermissionId", {}).then(
          res => {      
            console.log(res) 
            console.log(333333)    
            var obj = res.data.resultData;
              var arr = [];
              for(var i in obj) {
                var row = {};
                row.label = obj[i].pName;
                row.value = obj[i].id;
                arr.push(row);
              }
              //console.log(arr)
              self.optionsGroup = arr;
          }
        );
      },
      //change 选择项目组
      getDataList(){
        //this.globalValueGroup = this.valueGroup;
        this.defines.set(this.valueGroup)
        console.log(this.defines.globalValueGroup)
        if(this.$refs.child.getTableList){
          this.$refs.child.getTableList();
        }
        if(this.$refs.child.getNameList){
          this.$refs.child.getNameList();
        }
        // this.$refs.child.getTableList();
        // this.$refs.child.getNameList();
      },
      formSubmit(formName) {
      //console.log('submit!');      
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var self = this;
            if(self.form.newPassword !== self.form.confirmPassword){
              this.$message({
                  message: '两次密码不一致',
                  type: 'error'
              });
              return;
            }
            self.
              postRequest("/user/updatePassword", {
                id:self.userId,
                password:self.form.newPassword
              }).then(
                res => {      
                  console.log(res) 
                  if(res.data.result == '1' ){            
                    this.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                  }else if(res.data.result == '2' ){
                    this.$message({
                        message: res.data.message,
                        type: 'error'
                    });
                  }else if(res.data.result == '-2' ){
                    this.$message({
                        message: res.data.message,
                        type: 'error'
                    });
                  }    
                  this.dialogFormVisible = false;
                  this.$router.push("/");
                }
              );
            
          }
      })
      
      
    },
    }
  };
</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: left;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }
  .el-header img {display: inline-block;margin-top: 10px;}
  .bigBox {min-height: 978px;}
  .el-footer {text-align: center;}
  .el-dropdown {float:right;}
  .el-dropdown-link {color: #fff;font-size: 16px;}
  .logo-title {font-size: 28px;color: #fff;font-family:Microsoft YaHei;line-height: 40px;display: inline-block;height: 40px;position: relative;top: -10px;margin-left: 10px;}
  .groupSelect {float: right;margin-right: 20px;}
</style>





